<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>智能摇篮系统</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<link rel="stylesheet" href="index.css">
</head>

<body onload="init()">
	<div class="container">
		<header>
			<div class="header-content">
				<div class="logo">
					<div class="logo-icon">
						<i class="fas fa-baby"></i>
					</div>
					<h1>智能摇篮系统</h1>
				</div>
				<nav>
					<ul>
						<li><a href="#home"><i class="fas fa-home"></i>首页</a></li>
						<li><a href="#control"><i class="fas fa-sliders-h"></i>环境控制</a></li>
					</ul>
				</nav>
			</div>
		</header>

		<!-- 首页 -->
		<section id="home" class="page">
			<div class="current-time" id="timeDisplay"></div>

			<h2 class="card-title"><i class="fas fa-tachometer-alt"></i>系统概览</h2>

			<!-- 网关状态信息模块 -->
			<div class="gateway-status">
				<div class="gateway-icon">
					<i class="fas fa-wifi"></i>
				</div>
				<div class="gateway-info">
					<div class="gateway-title">网关状态</div>
					<div class="gateway-desc">
						<span class="status-label">主机名：</span>
						<span class="status-value" id="host_name">未连接</span>
						<span class="status-label">版本：</span>
						<span class="status-value" id="firm_ver">未连接</span>
						<span class="status-label">IP地址:</span>
						<span class="status-value" id="ip">未连接</span>
						<input type="button" value="连接" onclick="connect()">
						<input type="button" value="刷新设备数据" onclick="sensor()">
					</div>
				</div>
			</div>

			<div class="env-status">
				<div class="status-item">
					<div class="status-label">宝宝体温</div>
					<div class="status-value" id="tempValue">--°C</div>
					<div class="status-desc" id="tempDesc">正常</div>
				</div>
				<div class="status-item">
					<div class="status-label">湿度</div>
					<div class="status-value" id="humValue">--%</div>
					<div class="status-desc" id="humDesc">适宜</div>
				</div>
				<div class="status-item">
					<div class="status-label">心率</div>
					<div class="status-value" id="heartValue">--次/分</div>
					<div class="status-desc" id="heartDesc">正常</div>
				</div>
				<div class="status-item">
					<div class="status-label">光照值</div>
					<div class="status-value" id="lightValue">-- lux</div>
					<div class="status-desc" id="lightDesc">正常</div>
				</div>
				<!-- <div class="status-item">
					<div class="status-label">环境温度</div>
					<div class="status-value" id="envTempValue">--°C</div>
					<div class="status-desc" id="envTempDesc">舒适</div>
				</div> -->
			</div>

			<div class="dashboard">
				<div class="card">
					<h3 class="card-title"><i class="fas fa-toggle-on"></i>设备控制</h3>
					<div class="controls-grid">
						<div class="control-item">
							<div class="control-name">摇篮</div>
							<label class="switch">
								<input type="checkbox" id="cradle" name="cradle" onclick="cradle_contrl(1)">
								<span class="slider"></span>
							</label>
						</div>
						<div class="control-item">
							<div class="control-name">空调</div>
							<label class="switch">
								<input type="checkbox" id="aircondition" name="aircondition"
									onclick="aircondition_contrl()" onchange="toggleAirCondition(this)">
								<span class="slider"></span>
							</label>
						</div>
						<div class="control-item">
							<div class="control-name">窗帘</div>
							<label class="switch">
								<input type="checkbox" id="curtain" name="curtain" onchange="curtain_contrl()">
								<span class="slider"></span>
							</label>
						</div>
						<div class="control-item">
							<div class="control-name">音乐</div>
							<label class="switch">
								<input type="checkbox" id="music" name="music" onclick="music_contrl()">
								<span class="slider"></span>
							</label>
						</div>
					</div>

					<!-- 控制模块容器 - 摇篮档位和空调温度控制 -->
					<div class="control-modules">
						<!-- 摇篮档位控制 -->
						<div class="cradle-control">
							<div class="cradle-status" id="cradleStatus">当前状态: 关闭</div>
							<div class="gear-selector">
								<button class="gear-btn" onclick="cradle_contrl(0)">关闭</button>
								<button class="gear-btn" onclick="cradle_contrl(1)">低档</button>
								<button class="gear-btn" onclick="cradle_contrl(2)">中档</button>
								<button class="gear-btn" onclick="cradle_contrl(3)">高档</button>
							</div>
						</div>

						<!-- 空调温度控制 -->
						<div class="temperature-control" id="temperatureControl">
							<div class="temp-display" id="tempDisplay">24°C</div>
							<input type="range" min="16" max="30" value="24" class="temp-slider" id="tempSlider"
								oninput="changeTemperature(this.value)">
							<div class="temp-buttons">
								<button class="temp-btn" onclick="adjustTemperature(-1)">-</button>
								<button class="temp-btn" onclick="setTemperature(24)">24°C</button>
								<button class="temp-btn" onclick="setTemperature(26)">26°C</button>
								<button class="temp-btn" onclick="adjustTemperature(1)">+</button>
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<h3 class="card-title"><i class="fas fa-video"></i>实时监控</h3>
					<div class="monitor-view">
						<div class="monitor-placeholder">
							<img src="http://192.168.51.74:8080/?action=stream" width="100%" height="100%">
						</div>
					</div>
				</div>
			</div>

			<div class="chart-container">
				<div class="chart-placeholder">
					<h3 class="card-title"><i class="fas fa-chart-line"></i>温湿度历史数据</h3>
					<div id="tempHumChart" style="width: 100%; height: 400px;"></div>
				</div>
			</div>
		</section>
		<footer>
			<p>智能摇篮系统 © 2025 | 为婴儿健康设计</p>
			<p>开发商:万达收购讨论组</p>
		</footer>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
	<script src="index.js"></script>
</body>

</html>